<template>
	<view class="page bodyBg">
		<view class="item-card">
			<!-- 订单信息 -->
			<uni-section type="line" title="订单信息" color="#007AFF"/>
			<view class="orderBody">
				<view>
					<text class="item">orderNum:</text>
					<text>{{result.orderNum}}</text>
				</view>
				<view>
					<text class="item">userId:</text>
					<text>{{result.userId}}</text>
				</view>
				<view>
					<text class="item">id:</text>
					<text>{{result.id}}</text>
				</view>
				<view>
					<text class="item">paymentType:</text>
					<text>{{result.paymentType}}</text>
				</view>
			</view>
		</view>
		<button class="paybtn" plain @click="payOrder">支付</button>
	</view>
</template>

<script>
	import {Tool, API, Http} from '../../utils/index.js'
	export default {
		data() {
			return {
				result: {}
			}
		},
		methods: {
			
		},
		onLoad() {
			this.result = JSON.parse(uni.getStorageSync('qrResult'));
			// #ifdef MP-WEIXIN
			uni.hideHomeButton();
			// #endif
		},
		methods:{
			async payOrder() {
				// 支付订单
				let vm = this;
				let userId = uni.getStorageSync('userId');
				let baseUrl = uni.getStorageSync('BaseUrl');
				if(!vm.result.id) {
					return Tool.Toast('请选择联系人');
				}
				let url = baseUrl+API.API_URL_ORDER_PAYMENT;
				let res = await Http.post(url,vm.result);
				let {data} = res;
				if(data&&!(+data.errorCode) && data.data) {
					// 支付成功
					uni.showToast({
						mask:true,
						title: '支付成功',
						icon:'success',
						success: res => {
							uni.setStorageSync('from_result', 1);
							uni.switchTab({
								url:'../record/record',
								success: res => {
									uni.hideToast();
								}
							})
						}
					});
					return;
				}
				Tool.Toast('支付失败');;
			}
		}
	}
</script>

<style scoped>
	.item-card {
		/* #ifdef MP-WEIXIN */
		flex-direction: column;
		/* #endif */
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin-bottom: 40rpx;
	}
	.page {
		height: 100vh;
		/* #ifdef MP-WEIXIN */
		flex-direction: column;
		/* #endif */
		box-sizing: border-box;
		padding: 10rpx;
	}
	.orderBody {
		padding: 20rpx;
		/* #ifdef MP-WEIXIN */
		flex-direction: column;
		/* #endif */
	}
	
	.orderBody > view {
		margin: 10rpx 0rpx;
	}
	.orderBody text {
		color: #919191;
		font-size: .8rem;
	}
	.item {
		margin-right: 10rpx;
	}
	.paybtn {
		/* #ifdef MP-WEIXIN */
		width: 100%;
		/* #endif */
		border-color: #17a2b8;
		color: #17a2b8;
		font-weight: bold;
	}
	.paybtn:active {
		background-color: #17a2b8;
		color: #FFFFFF;
	}
</style>
